<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    


<head>
<style type="text/css">
.e-input {
	width: 198px;
	border: 1px solid #A4BED4;
	height: 18px;
	line-height: 18px;
}
</style>
<script type="text/javascript" src="<c:url value='/easyui/datagrid-detailview.js'/>"></script>
<script type="text/javascript">
		$(function(){
			
				init();
			
		});
		function init(){
			
			$('#t-users').datagrid({
				loadMsg:'',
				view:detailview,
				detailFormatter:function(index,row){
				  var content = '';
          
          
          
          if (row.birthday)  {
   content += '<span style="color:blue;font-weight:700">出生日期：</span></br>';
   content += '<div style="padding:5px">'+ row.birthday.replace(/\r\n/gi,'<br/>')+'</div>';
}
if (row.address)  {
   content += '<span style="color:blue;font-weight:700">地址：</span></br>';
   content += '<div style="padding:5px">'+ row.address.replace(/\r\n/gi,'<br/>')+'</div>';
}
if (row.monumber)  {
   content += '<span style="color:blue;font-weight:700">手机号码：</span></br>';
   content += '<div style="padding:5px">'+ row.monumber.replace(/\r\n/gi,'<br/>')+'</div>';
}
if (row.shortnumber)  {
   content += '<span style="color:blue;font-weight:700">手机短号：</span></br>';
   content += '<div style="padding:5px">'+ row.shortnumber.replace(/\r\n/gi,'<br/>')+'</div>';
}
if (row.homenumber)  {
   content += '<span style="color:blue;font-weight:700">家庭电话：</span></br>';
   content += '<div style="padding:5px">'+ row.homenumber.replace(/\r\n/gi,'<br/>')+'</div>';
}
if (row.email)  {
   content += '<span style="color:blue;font-weight:700">邮箱：</span></br>';
   content += '<div style="padding:5px">'+ row.email.replace(/\r\n/gi,'<br/>')+'</div>';
}
   content += '<span style="color:blue;font-weight:700">状态：</span></br>';
   content += '<div style="padding:5px">'+ showactivated(row.activated) +'</div>';
if (row.remark)  {
   content += '<span style="color:blue;font-weight:700">备注：</span></br>';
   content += '<div style="padding:5px">'+ row.remark.replace(/\r\n/gi,'<br/>')+'</div>';
}
if (row.roleids)  {
   content += '<span style="color:blue;font-weight:700">角色：</span></br>';
   content += '<div style="padding:5px">'+ row.roles.replace(/\r\n/gi,'<br/>')+'</div>';
}

           
					return '<div style="padding:5px">' + content + '</div>';
				}
				
			});
			
			$('#dlg').dialog({
				onOpen:function(){
					$('#dt-roles').datagrid('resize');
				}
			});
			
			
			
			// 扩展验证
			$.extend($.fn.validatebox.defaults.rules, {
				confirm:{
					validator: function(value,param){
						return value == $(param[0]).val();
					},
					message:'密码确认不对'
				}
			});
		}

		function showactivated(value){
			if (value = "1") 
				return "<font color=blue>激活</font>";
			else 
				return "<font color=red>未激活</font>";

			}
		
		function formatTimeout(value,row){
			if (value <= 300000)
				return "<font color=green>在线</font>";
			else if (value <= 600000)
				return "<font color=orange>暂离</font>";
			else if (value <= 1800000)
				return "<font color=red>离开</font>";
			else 
				return "<font color=gray>离线</font>";
		}
		
		function formatDepartment(value,row){
			if (row.department){
				return row.department.sxname;
			} else {
				return value;
			}
		}
		
		function formatDuty(value,row){
			if (row.duty){
				return row.duty.name;
			} else {
				return value;
			}
		}
		

		var actionUrl;
		
		function editItem(){
			var t = $('#t-users');
			var row = t.datagrid('getSelected');
			if (row){
				$('#myform').form('load', row);
				$('#confirmPassword').val(row.password);
				var dt = $('#dt-roles');
				dt.datagrid('clearSelections');
				if (row.roleids){
					var ids = row.roleids.split(',');
					for(var i=0; i<ids.length; i++){
						dt.datagrid('selectRecord', ids[i]);
					}
				}
				$('#departmentid').combogrid('disable');
				$('#dlg').dialog('setTitle', '修改员工资料').dialog('open');
				actionUrl = '<c:url value="/operset/user/update"/>?id=' + row.id;
			}
		}
		
		function deleteItem(){
			var t = $('#t-users');
			var row = t.datagrid('getSelected');
			if (row){
				$.messager.confirm('删除确认', '是否确定要删除选择员工信息?', function(r){
					if (r){
				$.ajax({
					url:'<c:url value="/operset/user/destroy"/>?id=' + row.id,
					type:'post',
					success:function(){
						$('#t-users').datagrid('reload');
					}
				});
					}});
			}
		}
		
		function saveItem(){
			var ids = [];
			var roles = $('#dt-roles').datagrid('getSelections');
			for(var i=0; i<roles.length; i++){
				ids.push(roles[i].id);
			}
			$('#roleids').val(ids.join(','));
			
			$('#myform').form('submit', {
				url:actionUrl,
				onSubmit:function(){
					return $('#myform').form('validate');
				},
				success:function(data){
					var data = eval('('+data+')');
					if (data.success){
						$('#dlg').dialog('close');
						$('#t-users').datagrid('reload');
					} else {
						$.messager.show({
							title:'保存失败',
							msg:'<pre>'+data.msg+'</pre>'
						});
					}
					//$('#dlg').dialog('close');
					//$('#t-users').datagrid('reload');
				}
			});
		}
		function doQuery(value){
			$('#t-users').datagrid('load', {
				q: value
			});
		}
	</script>

</head>
<body>
<div class="easyui-layout" fit="true">
<div region="north" border="false"
	style="height: 40px;  padding: 5px; overflow: hidden;" >
<div style="padding-top:3px;float:left">	
<input class="easyui-searchbox" prompt="按用户名称|手机号码|家庭电话进行查询"
	searcher="doQuery" style="width: 300px"></input>
</div>
<div style="float:left">
	 <a href="#" class="easyui-linkbutton"
	iconCls="icon-edit" plain="true" onclick="editItem()">修改员工</a> <a
	href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
	onclick="deleteItem()">删除员工</a></div>
	</div>
<div region="center" border="true">
<table id="t-users" style="display: none;"
	url="<c:url value='/operset/user/getItems'/>" singleSelect="true"
	rownumbers="true" pagination="true" border="false" fit="true"
	fitColumns="true">
	<thead>
		<tr>
		<th field="timeout" width="100" sortable="true" formatter="formatTimeout">在线状态</th>
			<th field="name" width="120" sortable="true">用户名称</th>
			<th field="sex" width="60">性别</th>
			<th field="departmentid" width="120" sortable="true"
				formatter="formatDepartment">所属部门</th>
			<th field="dutyid" width="100" sortable="true" formatter="formatDuty">职务</th>
			<th field="login" width="100">帐号</th>
			<th field="monumber" width="150" sortable="true">手机号码</th>
			<th field="shortnumber" width="150" sortable="true">手机短号</th>
			<th field="homenumber" width="150" sortable="true">家庭电话</th>
			<th field="intime" width="150" sortable="true">入职日期</th>
			<th field="outtime" width="150" sortable="true">离职日期</th>
			<th field="optime1" width="150" sortable="false">上班时间</th>
			<th field="optime2" width="150" sortable="false">下班时间</th>
			<th field="roles" width="300">角色</th>
		</tr>
	</thead>
</table>
</div>
</div>

<div id="dlg" style="width: 600px; 
<c:if test="${cfgs['menulayout'] == 'default'}">
height:380px; 
</c:if>
<c:if test="${cfgs['menulayout'] == 'topbottom'}">
height:250px; 
</c:if>
" 
 class="easyui-dialog"
	closed="true" modal="true" buttons="#dlg-buttons">

<div class="easyui-layout" fit="true" style="background: #ccc;">
<div region="center" style="padding: 10px;">
<form id="myform" method="post" style="margin: 0; padding: 0">
<table>
	<tr>
		<td>所属部门</td>
		<td>
		<select id="departmentid"  name="departmentid"  style="width:200px;"  
	data-options="required:false,editable:true" 
></select>
	<script>
	$(function(){
			$('#departmentid').combogrid({
				panelWidth:210,
				idField:'id',
				textField:'sxname',
				url:'<c:url value="/system/zjlist/getAllZjlistItems"/>',
				mode:'remote', 
				columns:[[
					{field:'sxname',title:'单位简称',width:180}
				]]
			});
		});
  </script>
		</td>
	</tr>
	<tr>
		<td>职务</td>
		<td><input type="text" class="easyui-combotree"
			style="width: 200px;" name="dutyid"
			url="<c:url value='/system/duty/getItems'/>"></td>
	</tr>
	<tr>
		<td style="width: 80px">用户名称</td>
		<td><input type="text" class="easyui-validatebox e-input"
			name="name" required="true"></input></td>
	</tr>
	<tr>
		<td>性别</td>
		<td><select class="easyui-combobox" name="sex" panelHeight="60"
			style="width: 60px">
			<option value="男">男</option>
			<option value="女">女</option>
		</select></td>
	</tr>
	<tr>
		<td style="width: 80px">出生日期</td>
		<td><input id="birthday" name="birthday" class="easyui-datebox"
			 editable="false"></input></td>
	</tr>
	<tr>
		<td style="width: 80px">地址</td>
		<td><input type="text" class="easyui-validatebox e-input"
			id="address" name="address"  editable="true"></input></td>
	</tr>
	<tr>
		<td style="width: 80px">邮箱</td>
		<td><input type="text" class="easyui-validatebox e-input"
			id="email" name="email"  editable="true"></input></td>
	</tr>

	<tr>
		<td>手机号码</td>
		<td><input type="text" class="e-input" name="monumber"></input></td>
	</tr>
	<tr>
		<td>手机短号</td>
		<td><input type="text" class="e-input" name="shortnumber"></input></td>
	</tr>
	<tr>
		<td>家庭电话</td>
		<td><input type="text" class="e-input" name="homenumber"></input></td>
	</tr>
	<tr>
		<td>入职时间</td>
		<td><input type="text" class="easyui-datebox e-input"
			name="intime"></input></td>
	</tr>
	<tr>
		<td>离职时间</td>
		<td><input type="text" class="easyui-datebox e-input"
			name="outtime"></input></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><input type="hidden" id="roleids" name="roleids"></td>
	</tr>
	<tr>
		<td>登录帐号</td>
		<td><input type="text" class="easyui-validatebox e-input"
			name="login" readonly></input></td>
	</tr>
	<tr>
		<td>登录密码</td>
		<td><input type="password" class="easyui-validatebox e-input"
			id="password" name="password" required="true"></input></td>
	</tr>
	<tr>
		<td>确认密码</td>
		<td><input type="password" class="easyui-validatebox e-input"
			id="confirmPassword" name="confirmPassword" required="true"
			validType="confirm['#password']"></input></td>
	</tr>
	<tr>
		<td>上班时间</td>
		<td><input type="text" class="easyui-timespinner" data-options="showSeconds:true"
			name="optime1"></input></td>
	</tr>
	<tr>
		<td>下班时间</td>
		<td><input type="text" class="easyui-timespinner" data-options="showSeconds:true"
			name="optime2"></input></td>
	</tr>
	<tr>
		<td style="width: 80px">备注</td>
		<td><textarea type="text" class="easyui-validatebox e-input"
			id="remark" name="remark" style="height: 50px" ></textarea></td>
	</tr>
	<tr>
		<td style="width: 80px">状态</td>
		<td><select id="activated" name="activated" required="true"
			editable="true" panelHeight="auto" class="easyui-combobox">
			<option value="1">激活</option>
			<option value="2">未激活</option>
		</select></td>
	</tr>

</table>
</form>
</div>
<div region="east" split="false" style="padding: 10px; width: 230px;">
<table id="dt-roles" class="easyui-datagrid"
	style="width: 200px; height: 200px;"
	url="<c:url value='/system/role/getptRoles'/>" idField="id"
	fitColumns="true">
	<thead>
		<tr>
			<th field="ck" checkbox="true" readonly></th>
			<th field="name" width="80">角色</th>
		</tr>
	</thead>
</table>
</div>
</div>

<div id="dlg-buttons" style="text-align: center;"><a href="#"
	class="easyui-linkbutton" iconCls="icon-save" onclick="saveItem()">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
	onclick="javascript:$('#dlg').dialog('close')">取消</a></div>
</div>
</body>
